<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
   <div id="app">

       <table class="table table-bordered table-striped">
            <tr>
                <th>书名</th>
                <th>作者</th>
                <th>数量</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
            <tr v-for="(book,index) in books">
                <td>{{book.name}}</td>
                <td>{{book.author}}</td>
                <td>
                    <!--
                    如果某个属性中的值是vue中的变量，需要使用绑定标签  v-bind:属性名
                     v-bind:属性名="vue中数据"  v-bind:href="href"  其中href为vue中的变量
                     缩写形式为： :属性名   如:  :href="href"

                    -->
<!--                    <input type="text"  v-bind:value="book.num">
                          缩写形式:   :disabled
-->
                    <button @click="book.num--" :disabled="book.num<=1">-</button>
                    <input type="text" style="width: 60px"  v-model="book.num" disabled>
                    <button @click="book.num++">+</button>
                </td>
                <td>{{book.price}}</td>
                <td>
                    <button @click="removeBook(index,book.name)">移除</button>
                </td>
            </tr>
       </table>
        <h1><font style="color: red">{{totalPrice}}</font></h1>
   </div>
   <!--    {{msg}}-->
       <script src="js/vue.js"></script>
       <script type="text/javascript">
           //1,创建vue对象
           const app = new Vue({
               el:"#app",// 绑定的dom的id   代表vue实例中的数据只在该dom中有效
               data:{//定义一些数据   项目中：异步请求服务端，服务端获取
                   books:[{name:'老王和小红的故事',num:1,author:'老王',price:88},
                       {name:'老王的故事',num:1,author:'老王',price:80},
                       {name:'数据结构和算法',num:1,author:'老王',price:76}]
               },
             methods:{
                 removeBook(index,name){
                    //this.books.splice(index,1);   //splice  根据索引删除
                    // $.ajax({
                    //     url:"delete/"+name;// name 应该 是id
                    //         success:function(r){
                    //             if(r.code==1){
                                    this.books.splice(index,1);
                            //     }
                            // }
                    // });
                 }
             },
               computed:{
                   totalPrice(){
                       let result = 0;
                       for(let i = 0;i<this.books.length;i++){
                           result += this.books[i].num*this.books[i].price;
                       }
                      return   result ;
                   }
               }
           });
       </script>

</body>
</html>